import styled from "styled-components";
import testIcon from "../../assets/testIconpng.png";
import { Divider, Pagination } from "antd";
import { useRef } from "react";
import { useState } from "react";
import { useEffect } from "react";
const Extensions = styled.div`
  width: 1200px;
  margin: 0 auto;
`;
const Nav = styled.div`
  .firstLevelMenu {
    display: flex;
    padding: 20px 0;
    .menuItem {
      background: #eee;
      padding: 10px 20px;
      border-radius: 17px;
      margin-right: 30px;
      cursor: pointer;
    }
    .menuItem:hover {
      background: #3e3e3e;
      color: white;
    }
    .active {
      background: #3e3e3e;
      color: white;
    }
  }
  .secondLevelMenu {
    display: flex;
    padding: 20px 0;
  }
`;
const Content = styled.div`
  width: 1200px;
  margin: 20px auto 40px auto;
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(3, 370px);
  /*  声明行间距和列间距  */
  grid-gap: 50px;
  /*  声明行的高度  */
  grid-template-rows: 370px 352px;
  justify-content: center;
  .latest-update-box {
    position: relative;
    width: 370px;
    height: 352px;
    padding: 25px 30px;
    box-sizing: border-box;
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    img {
      width: 100%;
      height: 180px;
      margin-left: 10px;
    }
    .boxTitle {
      line-height: 1.5;
      height: 3.2em;
      font-size: 16px;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .version {
      color: #666;
      font-size: 12px;
      margin: 10px 0 12px;
    }
    .info {
      font-size: 12px;
      color: #999;
    }
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      border-radius: 15px;
    }
  }
`;
const Footer = styled.div`
  margin: 40px;
`;

const firstLevelMenuList = [
  {
    key: 0,
    label: "全部",
  },
  {
    key: 1,
    label: "Ps插件",
    children: [
      {
        key: 0,
        label: "ps渐变",
      },
      {
        key: 1,
        label: "ps笔刷",
      },
      {
        key: 2,
        label: "ps样式",
      },
      {
        key: 3,
        label: "ps动作",
      },
    ],
  },
  {
    key: 2,
    label: "Fcpx插件",
  },
  {
    key: 3,
    label: "Ae插件",
  },
  {
    key: 4,
    label: "Pr预设",
  },
  {
    key: 5,
    label: "Lr预设",
  },
  {
    key: 6,
    label: "Sketch插件",
  },
];
const lastestBox = new Array(9).fill(1);
export default function ExtensionsPage() {
  useEffect(() => {
    
  },[])
  const randomColor = useRef(0);
  const [isMenuActive, setIsMenuActive] = useState(0);
  const randomGradient = [
    "linear-gradient(135deg,#43CBFF 15%,#9708CC 100%);",
    "linear-gradient(120deg,#E0C3FC 0%,#8EC5FC 100%); ",
    "linear-gradient(90deg,#F83600 0%,#F9D423 100%); ",
    "linear-gradient(135deg,#81FBB8 15%,#28C76F 100%); ",
  ];
  const handleMouseMove = (e, index) => {
    const halfHeight = 125;
    const halfWidth = 125;
    const MAX_DEG = 15;
    const { offsetX, offsetY } = e.nativeEvent;
    let rotateX = 0;
    let rotateY = 0;

    rotateX = -((halfHeight - offsetY) / halfHeight) * MAX_DEG;
    rotateY = ((halfWidth - offsetX) / halfWidth) * MAX_DEG;
    e.target.parentNode.setAttribute(
      "style",
      `transform: perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg);background: ${
        randomGradient[randomColor.current]
      };color:white`
    );
  };
  const handleMouseOut = (e) => {
    randomColor.current = Math.floor(
      Math.random() * (randomGradient.length - 1)
    );
    e.target.parentNode.style = {};
  };

  return (
    <Extensions>
      <Nav>
        <div className="firstLevelMenu">
          {firstLevelMenuList.map((item, index) => {
            return (
              <div
                key={index}
                className={`menuItem ${isMenuActive === index && "active"}`}
                onClick={() => {
                  setIsMenuActive(index);
                }}
              >
                <span>{item.label}</span>
              </div>
            );
          })}
        </div>
      </Nav>
      <Content>
        {lastestBox.map((item, index) => {
          return (
            <div
              className={"latest-update-box"}
              key={index}
              onMouseMove={(e) => {
                handleMouseMove(e, index);
              }}
              onMouseOut={(e) => {
                handleMouseOut(e);
              }}
              onClick={() => {
                navigation("/appDetailPage");
              }}
            >
              <img src={testIcon} alt="" />
              <div className="detail">
                <p className="boxTitle">
                  OmniFocus Pro 4 for mac(最佳GTD时间效率工具)
                </p>
                <p className="version">v4.5.1正式激活版</p>
                <p className="info">
                  <span>38.9 MB</span>
                  <span> | </span>
                  <span>2024-12-23</span>
                </p>
              </div>
              <div className="mask"></div>
            </div>
          );
        })}
      </Content>
      <Footer>
        <Pagination defaultCurrent={6} total={500} align="center" />;
      </Footer>
    </Extensions>
  );
}
